<template>
<div class="mt-20">
  <table class="el-table ui-table" :class="{'table-fixed-header': isFixed}"
    cellspacing="0"
    cellpadding="0"
    border="0">
    <thead class="ui-table__thead">
      <tr>
        <th class="ui-table_column_0">
          <div class="cell t-left">
            <p class="ml-10">
              <el-checkbox v-model="checkAll" @change="changeCheckAll"></el-checkbox>
              <span style="margin-left:5px">全选</span>
            </p>
          </div>
        </th>
        <th class="ui-table_column_1">
          <div class="cell"></div>
        </th>
        <th class="ui-table_column_2">
          <div class="cell">
            <el-dropdown @command="handleStatusCommand" trigger="click">
              <span class="el-dropdown-link">
                状态 <i class="el-icon-caret-bottom el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="0">全部</el-dropdown-item>
                <el-dropdown-item command="2">已联系</el-dropdown-item>
                <el-dropdown-item command="3">未联系</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </th>
        <th class="ui-table_column_3">
          <div class="cell">沟通记录</div>
        </th>
        <th class="ui-table_column_4">
          <div class="cell">联系TA</div>
        </th>
        <th class="ui-table_column_5">
          <div class="cell">添加者</div>
        </th>
        <th class="ui-table_column_6">
          <div class="cell"></div>
        </th>
      </tr>
    </thead>
  </table>
  <div v-if="isFixed" style="height:50px;"></div>
  <table class="el-table ui-table"
    cellspacing="0"
    cellpadding="0"
    border="0">
    <tbody>
      <tr v-for="column in data">
        <!-- 操作 -->
        <td class="ui-table_column_0" width="80">
          <div class="cell t-left">
            <p class="ml-10">
              <el-checkbox v-model="column.isChecked" @change="changeCheckItem"></el-checkbox>
              <i class="icon icon-collection ml-10" @click="column.isCollection = !column.isCollection" :class="{active: column.isCollection}" ></i>
            </p>
          </div>
        </td>

        <!-- 候选人 -->
        <td class="ui-table_column_1" width="18%">
          <div class="cell">
            <div class="td-user">
              <div class="user-head flex-grow-0">
                <img :src="column.head" alt="">
              </div>
              <div class="info">
                <p><a class="button-text text-nowrap">{{column.name}}</a></p>
                <p class="text-nowrap">{{column.job}}</p>
                <p class="text-nowrap">{{column.address}}</p>
              </div>
            </div>
          </div>
        </td>

        <!-- 状态 -->
        <td class="ui-table_column_2" width="14%">
          <div class="cell">
            <div style="position: relative;padding: 30px 0">
              <el-dropdown @command="changeStatus" trigger="click">
                <span class="el-dropdown-link">
                  {{column.statusName}} <i class="el-icon-caret-bottom el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="2">已联系</el-dropdown-item>
                  <el-dropdown-item command="3">未联系</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </td>

        <!-- 沟通记录 -->
        <td class="ui-table_column_3" width="18%">
          <div class="cell">
            <div class="table-tags-box">
              <div class="table-record-item" v-for="(item,index) in column.contactRecord" :key="index" v-if="index < 2">
                <span>{{item.date}}</span>
                <span>{{item.name}}</span>
              </div>
              <el-popover
                placement="bottom-start"
                width="160"
                trigger="click"
                v-if="column.contactRecord.length > 2">
                <div class="table-tags-item" slot="reference" >
                  <i class='el-icon-plus'></i>
                </div>
                <div class="table-record-item" v-for="(item,index) in column.contactRecord" :key="index">
                  <span>{{item.date}}</span>
                  <span>{{item.name}}</span>
                </div>
              </el-popover>
            </div>
          </div>
        </td>

        <!-- 联系TA -->
        <td class="ui-table_column_4" width="15%">
          <div class="cell">
            <i class="icon icon-contact-wx" v-if="column.contact.wx"></i>
            <el-popover
              v-if="column.contact.mobile"
              placement="bottom-start"
              width="250"
              v-model="column.phonePopupVisible"
              popper-class="phonePopupVisible">
              <div>
                <div class="mt-10 mb-10">
                  <!-- <span class="icon icon-c-mobile"></span> -->
                  <el-input size="mini" v-model="column.mobile" style="width:176px"></el-input>
                  <el-button size="mini" type="primary" class="ml-10" @click="takePhone(column)">呼叫</el-button>
                </div> 
              </div>
              <i class="icon icon-contact-mobile" slot="reference" @click="column.phonePopupVisible = true"></i>
            </el-popover>
            <i class="icon icon-contact-email" v-if="column.contact.email" @click="mailVisible=true"></i>
          </div>
        </td>

        <!-- 添加者 -->
        <td class="ui-table_column_5" width="15%">
          <div class="cell">
            <div class="user-head mini">
              <img :src="column.managerHead" alt="">
            </div>
            <span class="ml-5" style="vertical-align: middle;">{{column.managerName}}</span>
          </div>
        </td>

        <!-- 执行 -->
        <td class="ui-table_column_6">
          <div class="cel">
            <ui-button size="mini" type="lightblue" class="table-button">查看消息</ui-button>
            <ui-button size="mini" type="gray" class="table-button">添加标签</ui-button>
          </div>
        </td>
      </tr>
    </tbody>
  </table>

  <!-- 邮件弹框 -->
  <m-mail :visible.sync="mailVisible"></m-mail>

  <!-- 电话弹框 -->
  <m-phone :visible.sync="phoneVisible"></m-phone>

</div>
</template>

<script>
  import api from '@/api/api.js'
  import {Checkbox, Table, TableColumn, Row, Col, Popover, Dropdown, DropdownMenu, DropdownItem, Input, Button} from 'element-ui'
  import Collaboration from '../collaboration'
  import Mail from '@/components/common/components/mail'
  import Phone from '@/components/common/components/phone'
  export default {
    components: {
      [Checkbox.name]: Checkbox,
      [Table.name]: Table,
      [TableColumn.name]: TableColumn,
      [Row.name]: Row,
      [Col.name]: Col,
      [Popover.name]: Popover,
      [Dropdown.name]: Dropdown,
      [DropdownMenu.name]: DropdownMenu,
      [DropdownItem.name]: DropdownItem,
      [Input.name]: Input,
      [Button.name]: Button,
      'm-collaboration': Collaboration,
      'm-mail': Mail,
      'm-phone': Phone
    },
    props: ['data'],
    data () {
      return {
        loading: false,
        mailVisible: false, //邮件功能弹窗
        currentPage: 1, //当前页数
        collaborationVisible: false, //项目协作弹窗
        checkAll: false,
        tableData: [],
        mailVisible: false,
        phoneVisible: false,
        tableHeight: null,
        isFixed: false
      }
    },
    created() {
      //获取表头配置数据
      window.addEventListener('scroll', () => {
        if(this.$route.path.indexOf('/project') == 0){
          this.initSticky()
        }
      })
    },
    mounted() {
      this.initWidth()
      window.onresize = () => {
        this.initWidth()
      }
    },
    methods: {
      initSticky() {
        const _height = this.$util.getScrollTop()
        const _zoom = this.$util.getZoom()
        const topHeight = document.getElementsByClassName('temp-header')[0].clientHeight + 
          document.getElementsByClassName('search-form')[0].clientHeight + 
          document.getElementsByClassName('layout-breadcrumb')[0].clientHeight + 
          document.getElementsByClassName('project-d-container')[0].clientHeight + 
          70
        if(_height >= topHeight * _zoom) {
          this.isFixed = true
          this.initWidth()
        } else {
          this.isFixed = false
          this.initWidth()
        }
      },
      initWidth() {
        for(let i=0; i<7; i++) {
          if(document.getElementsByClassName('ui-table_column_' + i)[1]) {
            const _w = document.getElementsByClassName('ui-table_column_' + i)[1].clientWidth || 0
            document.getElementsByClassName('ui-table_column_' + i)[0].style.width = _w + 'px'
          }
        }
        if(document.getElementsByClassName('ui-table')[1]){
          document.getElementsByClassName('ui-table')[0].style.width = document.getElementsByClassName('ui-table')[1].clientWidth + 'px'
        }
      },
      //点击全选时
      changeCheckAll(){
        var flag = true;
        this.tableData.forEach(item => {
          if(!item.isChecked){
            flag = false
          }
        })
        if(flag){
          this.noHeaderHandleVisible = true
        }else{
          this.noHeaderHandleVisible = false
        }
        this.tableData.forEach(item => {
          item.isChecked = !flag
        })
      },
      changeCheckItem() {
        var flag = false
        this.tableData.forEach(item => {
          if(item.isChecked){
            flag = true
          }
        })
        if(!flag){
          this.noHeaderHandleVisible = true
        }else{
          this.noHeaderHandleVisible = false
        }
      },
      //选择表头状态
      handleStatusCommand(status) {

      },
      //单条改变状态
      changeStatus(status) {
        
      },
      takePhone(item) {
        item.phonePopupVisible = false
        this.phoneVisible = true;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .phonePopupVisible:last-child{
    display: none!important;
  }
  .t-project-block{
    padding: 15px 0;
    p{
      line-height: 30px;
    }
  }
</style>
